<template>
  <div>
    点击名称按钮切换登录的用户：
    <button
      @click="userStore.setUserInfo({ id: 1, username: 'Icy' })"
      :class="{ active: userStore.userInfo.id === 1 }"
    >
      Icy
    </button>
    <button
      @click="userStore.setUserInfo({ id: 2, username: 'Tom' })"
      :class="{ active: userStore.userInfo.id === 2 }"
    >
      Tom
    </button>
    <button
      @click="userStore.setUserInfo({ id: 3, username: 'Jerry' })"
      :class="{ active: userStore.userInfo.id === 3 }"
    >
      Jerry
    </button>
  </div>
</template>

<script setup>
import useUserStore from '../store/user';

const userStore = useUserStore();
/**
 console.log(userStore);
 * Store {
 *   setUserInfo: (payload) => {…},
 *   userInfo: { id: 1, username: 'icy' }
 * }
 */
</script>

<style lang="scss" scoped>
.active {
  background-color: #000;
  color: #fff;
}
</style>